<template>
    <div>
        <el-menu :default-active="activeMenuItem" class="el-menu-vertical-demo" :collapse="isCollapse()"
            text-color="#fff" active-text-color="#fff" style="font-weight: bold;">
            <div style="text-align: center; margin: 30px 0">
                <img src="../assets/logo-icon.png" style="width: 60px; height: 60px" />
                <h3 style="color: white; margin-top: 10px">{{ isCollapse() ? "" : `${account}智慧气象平台` }}</h3>
            </div>

            <template v-for="group in filteredGroupedMenuData">
                <!-- <template v-for="group in groupedMenuData"> -->
                <el-submenu :index="group.name">
                    <template slot="title">
                        <div class="onelabel"> <img v-if="group.icon" :src="group.icon" class="menu-icon" />
                            <i v-else :class="group.icon"></i>
                            <span>{{ group.label }}</span>
                        </div>
                    </template>
                    <el-menu-item v-for="item in group.items" :key="item.name" :index="item.path"
                        @click="clickMenu(item)" :class="{ 'is-active': activeMenuItem === item.path }">
                        <img v-if="item.icon" :src="item.icon" class="menu-icon" />
                        <i v-else :class="item.icon"></i>
                        <span slot="title">{{ item.label }}</span>
                    </el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            menuData: [
                //天气实况监测
                { name: "1-1", index: "1-1", label: "天气实况", icon: require('@/assets/icons/icon10.png'), path: '/weather_live' },
                { name: "1-2", index: "1-2", label: "天气雷达", icon: require('@/assets/icons/icon2.png'), path: '/radar' },
                { name: "1-3", index: "1-3", label: "雨量预警", icon: require('@/assets/icons/icon3.png'), path: '/rainfall_warning' },
                { name: "1-4", index: "1-4", label: "卫星云图", icon: require('@/assets/icons/icon4.png'), path: '/satellite_cloud' },
                { name: "1-5", index: "1-5", label: "雨量监测报警", icon: require('@/assets/icons/icon5.png'), path: '/rainfall_monitor' },
                { name: "1-6", index: "1-6", label: "气温监测报警", icon: require('@/assets/icons/icon6.png'), path: '/temperature_monitor' },
                { name: "1-7", index: "1-7", label: "雨量实况与预报", icon: require('@/assets/icons/icon7.png'), path: '/rainfall_status_forecast' },
                { name: "1-8", index: "1-8", label: "雨量预报分布图", icon: require('@/assets/icons/icon8.png'), path: '/rainfall_forecast_map' },
                { name: "1-9", index: "1-9", label: "闪电实况", icon: require('@/assets/icons/icon9.png'), path: '/lightning_live' },
                { name: "1-10", index: "1-10", label: "各区县逐日平均雨量", icon: require('@/assets/icons/icon9.png'), path: '/average_rainfall' },
                //精准靶向服务产品
                { name: "2-1", index: "2-1", label: "地灾点雨量", icon: require('@/assets/icons/icon4.png'), path: "/rainfall_disaster" },
                { name: "2-2", index: "2-2", label: "（地灾）雨量预警", icon: require('@/assets/icons/icon5.png'), path: "/disaster_rainfall_warning" },
                { name: "2-3", index: "2-3", label: "山洪危险区雨量", icon: require('@/assets/icons/icon6.png'), path: "/flood_warning" },
                { name: "2-4", index: "2-4", label: "（山洪）雨量预警", icon: require('@/assets/icons/icon7.png'), path: "/flood_rainfall_warning" },
                //精细化天气预报
                { name: "3-1", index: "3-1", label: "24小时逐日预报", icon: require('@/assets/icons/icon8.png'), path: '/hours' },
                { name: "3-2", index: "3-2", label: "7天逐日预报", icon: require('@/assets/icons/icon9.png'), path: '/sevenDay' },
                { name: "3-3", index: "3-3", label: "延伸期预报", icon: require('@/assets/icons/icon10.png'), path: '/extend' },
                { name: "3-4", index: "3-4", label: "未来3天预报", icon: require('@/assets/icons/icon16.png'), path: '/threeDay' },
                //气象服务产品
                { name: "4-1", index: "4-1", label: "地质灾害气象风险预警", icon: require('@/assets/icons/icon11.png'), path: "/gpre" },
                { name: "4-2", index: "4-2", label: "山洪灾害气象风险预警", icon: require('@/assets/icons/icon12.png'), path: '/fpre' },
                { name: "4-3", index: "4-3", label: "短时临近天气预报", icon: require('@/assets/icons/icon13.png'), path: '/short_time' },
                { name: "4-4", index: "4-4", label: "雨量现报", icon: require('@/assets/icons/icon14.png'), path: "/Rainfall_report" },
                { name: "4-5", index: "4-5", label: "气象信息快报", icon: require('@/assets/icons/icon15.png'), path: '/mete_infor' },
                { name: "4-6", index: "4-6", label: "重大气象信息专报", icon: require('@/assets/icons/icon16.png'), path: '/major' },
                { name: "4-7", index: "4-7", label: "专业天气预报", icon: require('@/assets/icons/icon5.png'), path: '/pro' },
                { name: "4-8", index: "4-8", label: "雨情快报", icon: require('@/assets/icons/icon6.png'), path: '/rain_situation' },
                { name: "4-9", index: "4-9", label: "72小时天气预报", icon: require('@/assets/icons/icon1.png'), path: '/72hour' },
                { name: "4-10", index: "4-10", label: "空气污染扩散气象条件等", icon: require('@/assets/icons/icon10.png'), path: '/air_pollution' },
                //灾害性天气预警
                { name: "5-1", index: "5-1", label: "气象灾害预警", icon: require('@/assets/icons/icon17.png'), path: '/disaster_warning' },
                { name: "5-2", index: "5-2", label: "突发气象灾害预警信号", icon: require('@/assets/icons/icon18.png'), path: '/warning_signal' },
                { name: "5-3", index: "5-3", label: "恶劣天气预警", icon: require('@/assets/icons/icon18.png'), path: '/severe_weather' },
                //闭环管理
                { name: "6-1", index: "6-1", label: "地灾预警回执", icon: require('@/assets/icons/icon17.png'), path: '/disaster_warning_receipt' },
                { name: "6-2", index: "6-2", label: "山洪预警回执", icon: require('@/assets/icons/icon19.png'), path: '/flood_warning_receipt' },
                { name: "6-3", index: "6-3", label: "降水短临回执（地灾）", icon: require('@/assets/icons/icon18.png'), path: '/rainfall_disasters' },
                { name: "6-4", index: "6-4", label: "降水短临回执（山洪）", icon: require('@/assets/icons/icon8.png'), path: '/rainfall_flood' },
                { name: "6-5", index: "6-5", label: "暴雨预警回执（地灾）", icon: require('@/assets/icons/icon21.png'), path: '/strom_disaster' },
                { name: "6-6", index: "6-6", label: "暴雨预警回执（山洪）", icon: require('@/assets/icons/icon22.png'), path: '/strom_flood' },
                { name: "6-7", index: "6-7", label: "闭环率统计", icon: require('@/assets/icons/icon2.png'), path: '/closed_loop_rate' },
                { name: "6-8", index: "6-8", label: "图文审核", icon: require('@/assets/icons/icon2.png'), path: '/imageAndTextReview' },
                //基础信息管理
                { name: "7-1", index: "7-1", label: "预警接收管理", icon: require('@/assets/icons/icon3.png'), path: '/warning' },
                { name: "7-2", index: "7-2", label: "灾害点信息管理", icon: require('@/assets/icons/icon5.png'), path: '/information' },
                //森林火险气象感知预报
                { name: "8-1", index: "8-1", label: "3天预报", icon: require('@/assets/icons/icon9.png'), path: '/3days' },
                { name: "8-2", index: "8-2", label: "10天预报", icon: require('@/assets/icons/icon10.png'), path: '/10days' },
                { name: "8-3", index: "8-3", label: "高危点位预报", icon: require('@/assets/icons/icon7.png'), path: '/high_risk' },
                //短临预报产品
                { name: "9-1", index: "9-1", label: "雨量现报", icon: require('@/assets/icons/icon13.png'), path: '/rainfall_situation' },
                { name: "9-2", index: "9-2", label: "灾害性短期临近天气预报", icon: require('@/assets/icons/icon10.png'), path: '/nowcasting' },
                { name: "9-3", index: "9-3", label: "1小时雨量预报图", icon: require('@/assets/icons/icon14.png'), path: '/1hour' },
                { name: "9-4", index: "9-4", label: "0~2小时雨量预报图", icon: require('@/assets/icons/icon11.png'), path: '/0_2hour' },
                // 气象风险预警
                { name: "10-1", index: "10-1", label: "地质灾害气象风险预警", icon: require('@/assets/icons/icon20.png'), path: '/disaster' },
                { name: "10-2", index: "10-2", label: "山洪灾害气象风险预警", icon: require('@/assets/icons/icon5.png'), path: '/flood' },
                //精细化短临预报
                { name: "11-1", index: "11-1", label: "灾害性短临预报", icon: require('@/assets/icons/icon15.png'), path: '/short_term_crisis' },
                { name: "11-2", index: "11-2", label: "24小时预报", icon: require('@/assets/icons/icon7.png'), path: '/24hours' },
                //专业专项服务产品
                { name: "12-1", index: "12-1", label: "流域面实况雨量与预报", icon: require('@/assets/icons/icon3.png'), path: '/basin' },
                { name: "12-2", index: "12-2", label: "区县预报", icon: require('@/assets/icons/icon12.png'), path: '/county' },
                { name: "12-3", index: "12-3", label: "电站周报", icon: require('@/assets/icons/icon4.png'), path: '/week' },
                { name: "12-4", index: "12-4", label: "电站旬报", icon: require('@/assets/icons/icon2.png'), path: '/10day' },
                { name: "12-5", index: "12-5", label: "电站月报", icon: require('@/assets/icons/icon8.png'), path: '/month' },
                //中短期预报产品
                { name: "13-1", index: "13-4", label: "未来3天预报", icon: require('@/assets/icons/icon16.png'), path: '/threeDay' },
                { name: "13-2", index: "13-2", label: "气象信息快报", icon: require('@/assets/icons/icon15.png'), path: '/mete_infor' },
                { name: "13-3", index: "13-3", label: "重大气象信息专报", icon: require('@/assets/icons/icon16.png'), path: '/major' },
                { name: "13-4", index: "13-4", label: "气象趋势预测", icon: require('@/assets/icons/icon11.png'), path: '/climate_trend' },
                //暂无数据
                { name: "14-1", index: "13-1", label: "暂无", icon: require('@/assets/icons/icon8.png'), path: "/home" },
            ],
            activeMenuItem: '',
            routes: [],
            permissions: [],
        };
    },
    computed: {
        // 根据账户类型返回不同用户名
        account() {
            if (Cookies.get('type')) {
                switch (Cookies.get('type')) {
                    case '电站':
                        return Cookies.get('station_name') + ''


                    default: return Cookies.get('county')

                }
            }
        },
        //判断一级目录与二级目录
        filteredGroupedMenuData() {
            return this.groupedMenuData.filter(group =>
                this.routes.includes(group.label)
            ).map(group => ({
                ...group,
                items: group.items.filter(item => this.permissions.includes(item.label))
            }));
        },
        groupedMenuData() {
            return [
                { name: '首页', label: '首页', icon: require('@/assets/icons/icon12.png'), items: this.menuData.slice(61, 62) },
                { name: '天气实况监测', label: '天气实况监测', icon: require('@/assets/oneicon/8.png'), items: this.menuData.slice(0, 10) },
                { name: '精准靶向服务产品', label: '精准靶向服务产品', icon: require('@/assets/oneicon/3.png'), items: this.menuData.slice(10, 14) },
                { name: '精细化天气预报', label: '精细化天气预报', icon: require('@/assets/oneicon/9.png'), items: this.menuData.slice(14, 18) },
                { name: '气象服务产品', label: '气象服务产品', icon: require('@/assets/oneicon/4.png'), items: this.menuData.slice(18, 28) },
                { name: '灾害性天气预警', label: '灾害性天气预警', icon: require('@/assets/oneicon/2.png'), items: this.menuData.slice(28, 31) },
                { name: '闭环管理', label: '闭环管理', icon: require('@/assets/oneicon/5.png'), items: this.menuData.slice(31, 39) },
                { name: '基础信息管理', label: '基础信息管理', icon: require('@/assets/oneicon/6.png'), items: this.menuData.slice(39, 41) },
                { name: '森林火险气象感知预报', label: '森林火险气象感知预报', icon: require('@/assets/oneicon/1.png'), items: this.menuData.slice(41, 44) },
                { name: '短临预报产品', label: '短临预报产品', icon: require('@/assets/oneicon/10.png'), items: this.menuData.slice(44, 48) },
                { name: '中短期预报产品', label: '中短期预报产品', icon: require('@/assets/oneicon/2.png'), items: this.menuData.slice(57, 61) },
                { name: '气象风险预警', label: '气象风险预警', icon: require('@/assets/oneicon/11.png'), items: this.menuData.slice(48, 50) },
                { name: '精细化短临预报', label: '精细化短临预报', icon: require('@/assets/oneicon/7.png'), items: this.menuData.slice(50, 52) },
                { name: '专业专项服务产品', label: '专业专项服务产品', icon: require('@/assets/oneicon/5.png'), items: this.menuData.slice(52, 57) },
            ];
        },
    },
    methods: {
        //控制侧边栏
        isCollapse() {
            return this.$store.state.tab.isCollapse;
        },
        clickMenu(item) {
            if (this.$route.path !== item.path) {
                this.$router.push(item.path);
            }
            this.activeMenuItem = item.path;
        },

    },
    watch: {
        $route(to, from) {
            this.activeMenuItem = to.path;
        },
    },
    mounted() {
        //获取cookie存储的登录信息
        this.activeMenuItem = this.$route.path;
        this.routes = JSON.parse(Cookies.get('routes') || '[]');
        this.permissions = JSON.parse(Cookies.get('permissions') || '[]');
        console.log(this.routes);
        console.log(this.permissions);
        console.log(Cookies.get('county'));

        const activeItem = this.menuData.find(item => item.path === this.$route.path);
        if (activeItem) {
            this.activeMenuItem = activeItem.path;
        }

    },
};
</script>

<style scoped>
.el-menu-vertical-demo {
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.039);
    overflow-y: auto;
}

.onelabel:hover {
    color: black;
}

.left-nav.home-active span {
    color: black;

}

.left-nav.home-active:hover span {
    color: black !important;
}

/* 子菜单背景 */
.el-menu-vertical-demo .el-submenu .el-menu-item {
    background-color: rgba(45, 57, 92, 0.982);
}

.el-menu-vertical-demo .el-submenu .el-menu-item:hover {
    background-color: rgb(42, 41, 59);
}

.el-menu-vertical-demo .el-submenu .el-menu-item.is-active {
    background-color: rgb(42, 41, 59);
}


/* 滚动条 */
.el-menu-vertical-demo::-webkit-scrollbar {
    width: 6px;
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.el-menu-vertical-demo::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
</style>